<template>
    <!-- 地区选择下拉框 -->
    <div>
        <el-cascader :options="AreaData" v-model="modelValue.areaCode" @change="change" ref="areaSelectRef"
            clearable></el-cascader>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import AreaData from "../utils/AreaData"

const props = defineProps({
    modelValue: {
        type: Object,
        default: {},
    }
})

const areaSelectRef = ref()

const emit = defineEmits(['update:modelValue'])

/* 选择框中的内容发送改变 */
const change = () => {
    const areaData = {
        areaName: [],
        areaCode: [],
    }
    // 获取节点信息，看是否有选择数据
    const checkedNodes = areaSelectRef.value.getCheckedNodes()[0];
    if (!checkedNodes) {
        // 没有选择数据
        emit('update:modelValue', areaData)
        return
    }
    // 获取选择的数据
    const pathValues = checkedNodes.pathValues;
    const pathLabels = checkedNodes.pathLabels;
    areaData.areaName = pathLabels;
    areaData.areaCode = pathValues;
    emit('update:modelValue', areaData)
}
</script>

<style lang="scss" scoped></style>
